<template>
  <el-form ref="userRef" :model="userForm" :rules="rules" label-position="top" class="enhanced-form">
    <!-- 左侧列 -->

    <el-form-item label="用户昵称" prop="nickName" style="width: 400px">
      <template #label>
        <span class="custom-label">
          <el-icon><User /></el-icon>
          用户昵称
        </span>
      </template>
      <el-input v-model="userForm.nickName" placeholder="请输入您的昵称" maxlength="30" clearable class="custom-input">
        <template #prefix>
          <el-icon class="input-icon"><Avatar /></el-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label="手机号码" prop="phonenumber" style="width: 400px">
      <template #label>
        <span class="custom-label">
          <el-icon><Iphone /></el-icon>
          手机号码
        </span>
      </template>
      <el-input v-model="userForm.phonenumber" placeholder="请输入11位手机号" maxlength="11" clearable class="custom-input">
        <template #prefix>
          <el-icon class="input-icon"><Cellphone /></el-icon>
        </template>
      </el-input>
    </el-form-item>

    <!-- 右侧列 -->
    <el-form-item label="电子邮箱" prop="email" style="width: 400px">
      <template #label>
        <span class="custom-label">
          <el-icon><Message /></el-icon>
          电子邮箱
        </span>
      </template>
      <el-input v-model="userForm.email" placeholder="请输入有效邮箱" maxlength="50" clearable class="custom-input">
        <template #prefix>
          <el-icon class="input-icon"><MessageBox /></el-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label="性别" style="width: 400px">
      <template #label>
        <span class="custom-label">
          <el-icon><Male /></el-icon>
          性别
        </span>
      </template>
      <el-radio-group v-model="userForm.sex" class="custom-radio-group">
        <el-radio-button value="0">
          <el-icon><Male /></el-icon>
          男
        </el-radio-button>
        <el-radio-button value="1">
          <el-icon><Female /></el-icon>
          女
        </el-radio-button>
      </el-radio-group>
    </el-form-item>

    <div class="form-actions">
      <el-button type="success" class="submit-btn" @click="submit">
        <el-icon class="btn-icon"><CircleCheck /></el-icon>
        保存
      </el-button>
      <el-button type="info" class="cancel-btn" @click="close">
        <el-icon class="btn-icon"><Close /></el-icon>
        关闭
      </el-button>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { updateUserProfile } from '@/api/system/user';
import { propTypes } from '@/utils/propTypes';
import { Avatar, Cellphone, CircleCheck, Female, Iphone, Male, Message, MessageBox, User } from '@element-plus/icons-vue';

const props = defineProps({
  user: propTypes.any.isRequired
});
const userForm = computed(() => props.user);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const userRef = ref<ElFormInstance>();
const rule: ElFormRules = {
  nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
  email: [
    { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
    {
      type: 'email',
      message: '请输入正确的邮箱地址',
      trigger: ['blur', 'change']
    }
  ],
  phonenumber: [
    {
      required: true,
      message: '手机号码不能为空',
      trigger: 'blur'
    },
    { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
};
const rules = ref<ElFormRules>(rule);

/** 提交按钮 */
const submit = () => {
  userRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      await updateUserProfile(props.user);
      proxy?.$modal.msgSuccess('修改成功');
    }
  });
};
/** 关闭按钮 */
const close = () => {
  proxy?.$tab.closePage();
};
</script>
<style scoped>
.enhanced-form {
  padding: 30px;
  background: var(--el-bg-color);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

  .custom-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--el-text-color-primary);

    .el-icon {
      font-size: 18px;
      color: var(--el-color-primary);
    }
  }

  .custom-input {
    :deep(.el-input__wrapper) {
      border-radius: 8px;
      transition: all 0.3s;
      padding: 0 15px;
      box-shadow: 0 0 0 1px var(--el-border-color) inset;

      &:hover {
        box-shadow: 0 0 0 1px var(--el-color-primary-light-5) inset;
      }

      &.is-focus {
        box-shadow: 0 0 0 2px var(--el-color-primary) inset;
        background: var(--el-color-primary-light-9);
      }
    }

    .input-icon {
      color: var(--el-text-color-placeholder);
      margin-right: 8px;
    }
  }

  .custom-radio-group {
    width: 100%;

    :deep(.el-radio-button) {
      flex: 1;

      .el-radio-button__inner {
        width: 100%;
        padding: 12px 20px;
        border-radius: 8px;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
        }
      }

      .el-icon {
        vertical-align: -2px;
        margin-right: 6px;
      }
    }
  }

  .form-actions {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px dashed var(--el-border-color);
    display: flex;
    justify-content: flex-start;
    gap: 16px;

    .submit-btn,
    .cancel-btn {
      padding: 12px 28px;
      border-radius: 8px;
      font-weight: 500;
      letter-spacing: 0.5px;
      transition: all 0.3s;

      .btn-icon {
        margin-right: 8px;
        font-size: 16px;
      }
    }

    .submit-btn {
      background: linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3));
      border: none;
      color: white;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px var(--el-color-primary-light-5);
      }
    }

    .cancel-btn {
      &:hover {
        background-color: var(--el-color-info-light-8);
        color: var(--el-color-info);
      }
    }
  }
}
</style>
